<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artist.css" />
		<style type="text/css">
			.mui-table-view li.mui-table-view-cell .mui-slider-handle {
				margin: 0;
				padding: 10px;
				height: 100px;
			}
			
			.mui-table-view li.mui-table-view-cell .mui-slider-handle .artist-location {
				color: #333333;
			}
			
			.mui-table-view li.mui-table-view-cell p.artist-icons label {
				margin: 0 4px;
			}
			
			.mui-table-view li.mui-table-view-cell p.artist-icons span {
				color: #FEB406;
			}
			
			.mui-table-view li.mui-table-view-cell p.artist-deal i.iconfont {
				margin: 0 5px;
				color: #F87300;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我关注的帮办er</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="artist-list">
				<!--<li class="mui-table-view-cell mui-media">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn btn-main action">取消关注</a>
					</div>
					<div class="mui-slider-handle">
						<a href="javascript:;">
							<div class="artistImg mui-media-object mui-pull-left">
								<img src="../images/shuijiao.jpg">
								<span class="fans"><i class="iconfont">&#xe669;</i>4</span>
							</div>
							<div class="mui-media-body">
								<h5 class="artist-name mui-ellipsis">金池</h5>
								<p class="artist-icons">
									<img src="../images/icon/vip2.png" />
									<i class="iconfont honesty-lv1">&#xe713;</i>
									<i class="iconfont auth">&#xe605;</i>
									<label>好评率：</label><span>35%</span>
								</p>
								<p class="artist-deal">已成交<span class="deal-count">55</span>笔<span class="mui-pull-right"><i class="iconfont">&#xe663;</i>2017-01-14</span></p>
								<p class="artist-type mui-ellipsis">流行歌手-电影-电视剧-广告-流行歌手-电影-电视剧-广告</p>
								<span class="artist-location">北京</span>
							</div>
						</a>
					</div>
				</li>-->
			</ul>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var artistList = document.getElementById("artist-list");
			var lazyLoad = mui(artistList).imageLazyload({
				placeholder: '../images/holder1.png',
				autoDestroy: false
			});
			mui.plusReady(function() {
				Common.ajax({
					url : baseURL + 'artistListOfAtten/get.json'
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						var data = data.attenList;
						if(data.length) {
							for (var i = 0; i < data.length; i++) {
								var headSrc = Common.artistPic + data[i].id + '.jpg?' + Math.random();
								createArtistsList(data[i].id, data[i].stageName, data[i].v, data[i].honestyLevel, data[i].isAuth,
									headSrc, data[i].fanNum, data[i].rateOfpraise, data[i].completeNum, data[i].attentionTime.substr(0, 16),
									data[i].performanceType, data[i].city);
							}
							lazyLoad.refresh(true);
						} else {
							Common.showState(artistList, '&#xe608;', '你还没有关注任何人', 50);
						}
					} else {
						mui.toast('加载失败，请稍后再试');
					}
				}, function(xhr) {
					Common.linkError();
					console.error(xhr.status + ':' + xhr.statusText);
				})
				
				// 点击外部自动收起
				mui(document).on('tap', 'html', function() {
					mui.swipeoutClose($("li.mui-selected")[0]);
				})

				// 取消关注
				mui(artistList).on('tap', '.mui-btn', function() {
					var thisId = $(this).parents('li')[0].id;
					plus.nativeUI.confirm("确认取消关注？", function(e) {
						if(!e.index) {
							var url = baseURL + 'myArtist/attention/26/' + thisId + '/0.json';
							console.log(url);
							Common.ajax({
								url : url
							}, function(data) {
								console.log(JSON.stringify(data));
								if(data.code == 1) {
									mui.toast('操作成功');
									mui.swipeoutClose($("li.mui-selected")[0]);
									plus.webview.currentWebview().reload();
								} else {
									mui.toast('操作失败，请稍后再试');
								}
							}, function(xhr) {
								mui.toast('网络异常，请稍后再试');
								console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
							})
						} else {
							mui.swipeoutClose($("li.mui-selected")[0]);
						}
					}, '取消关注', ["确定", "取消"]);
				})
				
				// 点击进入艺人详情
				mui(artistList).on('tap', '.mui-table-view-cell', function() {
					Common.openWindow('artist-workroom.html',{artistId : this.id});
				})
				
				/**
				 * @param {Object} id			艺人id
				 * @param {Object} name			艺人姓名
				 * @param {Object} vip			vip标志
				 * @param {Object} honesty		诚信等级
				 * @param {Object} auth			实名认证状态
				 * @param {Object} src			艺人头像路径
				 * @param {Object} fansCount	粉丝数量
				 * @param {Object} praise		好评率
				 * @param {Object} dealCount	成交数量
				 * @param {Object} attentime	关注时间
				 * @param {Object} type			艺人类型
				 * @param {Object} address		艺人所在城市
				 */
				function createArtistsList(id, name, vip, honesty, auth, src, fansCount, praise, dealCount, attentime, type, address) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					li.id = id;
					var liStr = '<div class="mui-slider-right mui-disabled"><a class="mui-btn btn-main action">取消关注</a>';
					liStr += '</div><div class="mui-slider-handle"><a href="javascript:;"><div class="artistImg mui-media-object mui-pull-left">';
					liStr += '<img data-lazyload="' + src + '"><span class="fans"><i class="iconfont">&#xe669;</i> '+ fansCount;
					liStr += '</span></div><div class="mui-media-body"><h5 class="artist-name">' + name + '</h5><p class="artist-icons">';
					if(vip) {
						liStr += '<img src="../images/icon/vip2.png"/>';
					}
					liStr += '<i class="iconfont honesty-lv' + honesty + '">&#xe713;</i><i class="iconfont auth state';
					liStr += auth + '">&#xe605;</i><label>好评率：</label><span>' + (praise * 100).toFixed(0) + '%</span></p><p class="artist-deal">已成交 ';
					liStr += '<span class="deal-count">' + dealCount + '</span> 笔<span class="mui-pull-right"><i class="iconfont">&#xe663;</i>';
					liStr += attentime + '</span></p><p class="artist-type mui-ellipsis">' + type + '</p><span class="artist-location">' + address;
					liStr += '</span></div></a></div>';
					li.innerHTML = liStr;
					artistList.appendChild(li);
				}
			})
		</script>
	</body>

</html>